<template>
  <ul class="switch">
    <li
      v-for="(item, index) in list"
      :key="index"
      :class="{active: conf.chose === item.id}"
      @click="selectThis(item)"
    ><span>{{item.name}}</span></li>
  </ul>
</template>
<script>
export default {
  name: "radio",
  props: ["conf"],
  computed: {
    list(){return this.conf.list},
    isAllSelected(){
      return this.list.length && this.list.length === this.list.filter(item => item.isActive).length;
    },
    isSomeSelected(){
      return !this.isAllSelected && this.list.some(item => item.isActive);
    },
  },
  methods: {
    selectThis(thisItem){
      this.conf.chose = thisItem.id;
    }
  },
}
</script>
<style scoped>
  .switch{
    display: flex;
    margin: 0 2px;
    padding: 2px 4px;
    flex-wrap: wrap;
    border: 1px solid var(--cl-major);
    border-radius: 4px;
  }
  .switch li{
    padding: 0 4px;
    white-space: nowrap;
    color: #333;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all .3s;
  }
  .switch li.active{
    color: #fff;
    background-color: var(--cl-major);
  }
</style>
